<template>
	<view class="content">
		<cu-custom bgColor="custom-top" :isBack="true" :isTitle="false">
			<block slot="backText" class="titilestyle"></block>
		</cu-custom>
		<view class="firstCanvas">
			<view class="top">
				<image class="top-bg" :src="domain+'/static/img/bg.png'" data-name="bg.png" mode="widthFix"></image>

				<view class="title-box middle">
					<view class="qrcode-box">
						<image :src="code" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
			<view class="touxiang-box flex  flex-direction">
				<view class="basis-xll middle head-img">
					<image class="" :src="userInfo.headimgurl" mode="aspectFill"></image>
				</view>

				<view class="basis-xll text-center text-bold text-xl margin-top-sm">
					{{userInfo.nickname}}
				</view>
			</view>

			<view class="info-desc middle">
				<view class="info-desc-title text-center">
					邀请您加入一舟云校园享用美食 完成订单助力好友
				</view>

			</view>

			<view class="btn-item flex justify-between ">
				<view class="btn-item-box bg-left middle round bg-white" @click="tuiguang">
					<text class="cuIcon-present"></text>推广有礼
				</view>
				<view class="btn-item-box bg-right middle round " @click="downOrder">
					<text class="cuIcon-post"></text>立即下单
				</view>
			</view>
			
			
			<view class="text-red bottom-text  middle text-sm">
				小提示：仅限当前校区
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		name: "shareInfo",
		data() {
			return {
				domain: this.resDomain,
				userInfo: {
					nickname: "",
					headimgurl: ""
				},
				code: "",
			}
		},
		onShareAppMessage(res) {
			return {
				title: "一舟校园",
				path: "/pages/basic/basic",
			}
		},
		onShow() {
			let authorization = uni.getStorageSync('authorization');
			if (!authorization) {
				uni.showModal({
					content: "您还未登录，请先登录",
					success: (r) => {
						if (r.confirm) {
							uni.navigateTo({
								url: "./login"
							})
						} else {
							uni.navigateBack({
								delta: 1
							})
						}
					}
				})
			} else {
				if (this.statusState.is_share == 0) {
					uni.showModal({
						content: "当前校区暂未开通分享活动",
						showCancel:false,
						success: (r) => {
							uni.navigateBack({
								delta: 1
							})
						}
					})
				}
				this.loadData();
			}

		},


		methods: {
			loadData() {
				let header = {
					'Content-Type': 'application/json'
				}
				let authorization = uni.getStorageSync('authorization');
				this.$set(header, 'authorization', authorization);
				let error = () => {
					uni.showModal({
						content: "出错了，请稍后再试",
						showcancel: false,
						success: (r) => {
							uni.navigateBack({
								delta: 1
							})
						}
					})
				}
				uni.request({
					url: this.apiHost + "/buyer/ShareQrCode",
					data: {
						area_id: uni.getStorageSync('area_id'),
					},
					method: "get",
					header: header,
					timeout: 5000,
					responseType: "arraybuffer",
					success: (res) => {
						if (res.statusCode == 200) {
							const arrayBuffer = res.data;
							this.code = `data:image/jpeg;base64,${uni.arrayBufferToBase64(arrayBuffer)}`

							this.$forceUpdate();
							this.refresh();
						} else {
							error();
						}
					},
					fail: () => {
						error()
					}
				})
			},
			refresh() {
				this.apiRequest('/buyer/userInfo', {
					area_id: uni.getStorageSync('area_id')
				}, 0).then(res => {
					this.userInfo = Object.assign(this.userInfo, res.data);

				});
				this.StorageInfo = uni.getStorageInfoSync();
			},
			tuiguang() {

				uni.redirectTo({
					url: "/pages/user/share"
				})


			},
			//下单
			downOrder() {
				uni.switchTab({
					url: "/pages/basic/basic"
				})
			}
		}




	}
</script>
<style lang="scss">
	.content {


		.firstCanvas {
			width: 100vw;
			height: 100vh;
			position: absolute;
			top: 0;
			background-color: white;
			.bottom-text{
				position: absolute;
				bottom: 5vh;
				width: 100%;
				
			}

			.top {
				width: 100vw;
				height: calc(100vw*(700/750));
				background-repeat: no-repeat;
				background-size: cover;
				position: relative;

				.top-bg {
					width: inherit;
					height: calc(100vw*(700/750));
					position: absolute;
					top: 0;
				}

				.title-box {
					position: relative;
					width: inherit;
					height: calc(100vw*(582/750));

					.qrcode-box {
						width: calc(100vw*(300/750));
						height: calc(100vw*(300/750));
						background: #FFFFFF;
						box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.05);
						border-radius: 20rpx;
						margin-top: calc(100vw*(160/750));

						image {
							width: inherit;
							height: inherit;
							border-radius: 20rpx;
						}
					}

					image {
						width: inherit;
						z-index: 1;
					}

				}

			}


			.touxiang-box {
				width: inherit;
				height: calc(100vw*(280/750));
				margin-top: calc(100vw*(-80/750));

				.head-img {
					image {
						width: calc(100vw*(160/750));
						height: calc(100vw*(160/750));
						border-radius: 50%;
					}
				}

			}

			.info-desc {
				width: inherit;
				font-size: 28rpx;
				font-weight: 500;

				.info-desc-title {
					width: calc(100vw*(362/750));
				}

				color: #999999;

			}

			.btn-item {
				width: inherit;
				margin-top: calc(100vw*(90/750));
				height: calc(100vw*(80/750));
				padding: 0 calc(100vw*(75/750));

				.btn-item-box {
					width: calc(100vw*(280/750));
					height: inherit;
					color: white;
				}

				.bg-left {
					background: #FB4733;
				}

				.bg-right {
					background: #FEAF16;
				}
			}


		}



	}
</style>
